import React from 'react'

import '../public/css/account.scss'
import requestSign from "../public/js/requestSign";
import Api from "../router/Api";

class Myaccount extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            isShow:false,
            componenyName:"",//企业全称
            socialCreditCode:"",//社会信用代码
            legalName:"",//法人姓名
            legalIdentitycard:"",//法人身份证
            legalTelphone:"",//法人联系方式
            borrowerName:"",//借款人姓名
            identitycardNumber:"",//身份证
            bankcard:"",//银行账号
            bankName:"",//银行名称
            telephone:"",//银行预留手机号
            information:"",//相关资料
        }
    }
    componentWillMount(){//在这个方法中请求接口
        const token = sessionStorage.getItem('token');
        const _this = this;
        Api.getTimeStamp()
            .then(function (res) {
                const timestamp = res.data.data.timestamp;
                const sign = requestSign({timestamp,token});
                Api.getBorrowUserInfo({
                    token:token,
                    timestamp:timestamp,
                    sign:sign.sign
                })
                    .then(function (res) {
                        if(res.data.data.userType === 0){
                            _this.setState({
                                telephone:res.data.data.phone,
                                borrowerName:res.data.data.realName,
                                bankcard:res.data.data.bankCardId,
                                identitycardNumber:res.data.data.certifyName,
                                bankName:res.data.data.branchBankInfo,
                                information:res.data.data.certifyPic
                            })
                        }else{
                            _this.setState({
                                telephone:res.data.data.phone,
                                componenyName:res.data.data.realName,
                                bankcard:res.data.data.bankCardId,
                                socialCreditCode:res.data.data.certifyName,
                                bankName:res.data.data.branchBankInfo,
                                legalName:res.data.data.corporateName,
                                legalIdentitycard:res.data.data.corporateCard,
                                information:res.data.data.certifyPic
                            })
                        }

                    })
            })
            .catch(function (err) {
                console.log(err);
            })
    }
    handleShowImg(e){
        this.props.isDialogImgShow("true",e.target.src);
    }
    render(){
        const informationLists = this.state.information.split(',');
        console.log(informationLists);
        const informations = informationLists.map((information,i)=>
            <div><img src={information} alt="" onClick={this.handleShowImg.bind(this)}/></div>
        );
        console.log(informations);
        return(
            <div className="account-ctn">
                <div>
                    <h3>账户信息</h3>
                    <ul>
                        <li className={this.state.componenyName ? "clearFix" : "clearFix hide"}>
                            <div className="fl">企业全称:</div>
                            <div className="fr"> {this.state.componenyName}</div>
                        </li>
                        <li className={this.state.socialCreditCode ? "clearFix" : "clearFix hide"}>
                            <div className="fl">统一社会信用代码/注册号:</div>
                            <div className="fr">{this.state.socialCreditCode}</div>
                        </li>
                        <li className={this.state.legalName ? "clearFix" : "hide"}>
                            <div className="fl">法人姓名:</div>
                            <div className="fr">{this.state.legalName}</div>
                        </li>
                        <li className={this.state.legalIdentitycard ? "clearFix" : "hide"}>
                            <div className="fl">法人身份证号:</div>
                            <div className="fr">{this.state.legalIdentitycard}</div>
                        </li>
                        <li className={this.state.legalTelphone ? "clearFix" : "hide"}>
                            <div className="fl">法人联系方式:</div>
                            <div className="fr">{this.state.legalTelphone}</div>
                        </li>
                        <li className={this.state.borrowerName ? "clearFix" : "hide"}>
                            <div className="fl">借款人名称:</div>
                            <div className="fr">{this.state.borrowerName}</div>
                        </li>
                        <li className={this.state.identitycardNumber ? "clearFix" : "hide"}>
                            <div className="fl">身份证号:</div>
                            <div className="fr">{this.state.identitycardNumber}</div>
                        </li>
                        <li className="clearFix">
                            <div className="fl">银行账号:</div>
                            <div className="fr">{this.state.bankcard}</div>
                        </li>
                        <li className={this.state.bankName ? "bankname clearFix" :"hide"}>
                            <div className="fl">银行名称:</div>
                            <div className="fr">{this.state.bankName}</div>
                        </li>
                        <li className="clearFix">
                            <div className="fl">银行预留手机号:</div>
                            <div className="fr">{this.state.telephone}</div>
                        </li>
                        <li className="clearFix relevant">
                            <div className="fl">相关资料:</div>
                            <div className="fr clearFix">
                                {informations}
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        )
    }
}

export default Myaccount